<template>
  <a-list size="small" bordered :data-source="edgexs" class="edgex-list">
    <template #renderItem="{ item }">
      <a-list-item
        class="bg-white cursor-pointer hover:shadow-inner scale"
        @click="goDetail(item.edgex_id, item.prefix)"
      >
        <div>
          {{ item.edgex_name }}
        </div>
        <div>
          <a-tag>
            {{ item.edgex_id }}
          </a-tag>
          <StatusTag :status="item.status"></StatusTag>
        </div>
      </a-list-item>
    </template>
  </a-list>
</template>

<script lang="ts">
import { Edgex } from "model";
import { defineComponent, onBeforeMount, ref } from "vue";
import StatusTag from "../tags/StatusTag.vue";
import { useRouter } from "vue-router";
import { nearbyEdgex } from "@/controller/Edgex";
import { Store, useStore } from "vuex";
import { RootState } from "@/store/types";

export default defineComponent({
  name: "EdgexList",
  components: { StatusTag },
  setup() {
    const store: Store<RootState> = useStore();
    const edgexs = ref<Array<Edgex>>();
    onBeforeMount(async () => {
      edgexs.value = await nearbyEdgex(store.state.position.province);
    });
    const router = useRouter();
    const goDetail = (id: string, prefix: string) => {
      router.push({
        name: "EdgexDetail",
        params: {
          prefix: prefix,
        },
        query: {
          id: id,
        },
      });
    };
    return { edgexs, goDetail };
  },
});
</script>

<style scoped lang="scss"></style>
